<template>
  <div class="goods-list">
    <div class="head">
      <h3>商品库</h3>
      <div class="demo-input-size">
        <el-input
          v-model="input3"
          placeholder="请输入商品名"
          :suffix-icon="Search"
        />
      </div>
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button type="primary" @click="handleAdd">新建</el-button>
    </div>
    <div class="content"></div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="商品编号" width="150" />
      <el-table-column prop="name" label="商品名称" width="180" />
      <el-table-column prop="name" label="商品价格" width="100" />
      <el-table-column prop="name" label="规格类目" width="180" />
      <el-table-column prop="name" label="商品图片" width="200" />
      <el-table-column prop="name" label="商品卖点" />
      <el-table-column prop="name" label="商品描述" />
      <el-table-column prop="address" label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template></el-table-column
      >
    </el-table>
  </div>
  <addGoods ref="dialog"></addGoods>
</template>

<script>
import { ref } from '@vue/reactivity';
import addGoods from "../Good/addGoods.vue";
export default {
  components: {
    addGoods,
  },
  setup() {
    const tableData = [
      {
        date: "2016-05-03",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
      },
      {
        date: "2016-05-08",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
      },
      {
        date: "2016-05-06",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
      },
      {
        date: "2016-05-07",
        name: "Tom",
        state: "California",
        city: "Los Angeles",
        address: "No. 189, Grove St, Los Angeles",
        zip: "CA 90036",
      },
    ];
    const dialog =ref();

    const handleAdd = () => {
      console.log("这是添加商品");
      dialog.value.showModal();
    };

    const onSearch = () => {
      console.log("这是查询商品");
    };

    const handleEdit = () => {
      console.log("这是编辑商品");
       dialog.value.showModal();
    };

    const handleDelete = () => {
      console.log("这是删除商品");
    };
    return {
      tableData,
      dialog,
      handleAdd,
      onSearch,
      handleDelete,
      handleEdit,
    };
  },
};
</script>

<style>
.goods-list .head {
  display: flex;
}
.goods-list .content {
  margin-top: 20px;
}

.goods-list .head .demo-input-size {
  margin-left: 20px;
  margin-right: 20px;
}
</style>